Highlight Elements in Selenium WebDriver

Highlighting Elements in Selenium WebDriver is a useful technique for visually identifying a web element during automated test execution. Selenium does not provide a built-in highlight() method, so JavaScriptExecutor is commonly used to temporarily change the CSS properties of a WebElement, such as its border, outline, background color, or box shadow.

Highlighting is especially useful for debugging locators, understanding automation execution, demonstrating Selenium concepts, identifying the exact element being processed, and capturing screenshots during troubleshooting.

Selenium training commonly covers WebDriver, WebElements, locators, browser interactions, waits and synchronization, Actions, TestNG, Page Object Model, automation frameworks, reporting, debugging, and practical projects.

Selenium Training Course | Register for Course Demo

1. What is Highlighting an Element?

Highlighting an element means temporarily changing the visual appearance of a WebElement so that it can be easily identified on the webpage.

For example, a Selenium script can place a red border around a Login button before clicking it.

WebElement loginButton =

    driver.findElement(By.id("login"));
 
JavascriptExecutor js =
    (JavascriptExecutor) driver;
 
js.executeScript(
    "arguments[0].style.border='3px solid red';",
    loginButton
);

2. Why Do We Highlight Elements?

• To visually identify the element being automated.
• To debug incorrect locators.
• To demonstrate Selenium automation.
• To understand the execution flow.
• To troubleshoot failed test cases.
• To create clearer debugging screenshots.
• To help beginners understand WebDriver interactions.
• To verify which element a locator has selected.

3. Is Highlighting Required for Selenium Automation?

No. Highlighting is not required for normal Selenium automation. It is primarily a debugging, visualization, demonstration, and troubleshooting technique.

Selenium can locate and interact with an element without visually modifying it.

4. Highlighting Element Flow

Launch Browser

      ↓
Open Web Application
      ↓
Locate WebElement
      ↓
Create JavascriptExecutor
      ↓
Modify Element CSS
      ↓
Element Becomes Highlighted
      ↓
Perform Selenium Action
      ↓
Validate Result
      ↓
Restore Style if Required

5. What is JavascriptExecutor?

JavascriptExecutor is a Selenium interface that allows Java code to execute JavaScript inside the browser.

JavascriptExecutor js =

    (JavascriptExecutor) driver;

6. Basic Syntax for Highlighting

JavascriptExecutor js =

    (JavascriptExecutor) driver;
 
js.executeScript(
    "arguments[0].style.border='3px solid red';",
    element
);

7. Understanding arguments[0]

When a WebElement is passed to executeScript(), JavaScript receives it through the arguments object.

js.executeScript(

    "arguments[0].style.border='3px solid red';",
    element
);

• arguments[0] represents the first argument.
• element is the WebElement passed from Java.
• style.border changes the element's border.

8. Highlight Using a Red Border

WebElement element =

    driver.findElement(By.id("username"));
 
JavascriptExecutor js =
    (JavascriptExecutor) driver;
 
js.executeScript(
    "arguments[0].style.border='3px solid red';",
    element
);

9. Highlight Using a Blue Border

js.executeScript(

    "arguments[0].style.border='3px solid blue';",
    element
);

10. Highlight Using a Green Border

js.executeScript(

    "arguments[0].style.border='3px solid green';",
    element
);

11. Highlight Using a Thick Border

js.executeScript(

    "arguments[0].style.border='5px solid red';",
    element
);

12. Highlight Using Outline

An outline is another useful way to visually highlight an element.

js.executeScript(

    "arguments[0].style.outline='3px solid red';",
    element
);

An outline is often convenient for debugging because it generally does not change the element's layout dimensions like a border can.

13. Highlight Using Background Color

js.executeScript(

    "arguments[0].style.backgroundColor='yellow';",
    element
);

14. Highlight Using Box Shadow

js.executeScript(

    "arguments[0].style.boxShadow='0 0 10px red';",
    element
);

15. Highlight Using Multiple CSS Properties

js.executeScript(

    "arguments[0].style.border='3px solid red';" +
    "arguments[0].style.backgroundColor='yellow';" +
    "arguments[0].style.boxShadow='0 0 10px red';",
    element
);

16. Highlight a Text Box

WebElement username =

    driver.findElement(By.id("username"));
 
js.executeScript(
    "arguments[0].style.outline='3px solid red';",
    username
);

17. Highlight a Password Field

WebElement password =

    driver.findElement(By.id("password"));
 
js.executeScript(
    "arguments[0].style.outline='3px solid red';",
    password
);

18. Highlight a Login Button

WebElement login =

    driver.findElement(By.id("login"));
 
js.executeScript(
    "arguments[0].style.outline='3px solid red';",
    login
);

19. Highlight a Submit Button

WebElement submit =

    driver.findElement(By.id("submit"));
 
js.executeScript(
    "arguments[0].style.border='4px solid green';",
    submit
);

20. Highlight a Checkbox

WebElement checkbox =

    driver.findElement(By.id("terms"));
 
js.executeScript(
    "arguments[0].style.outline='3px solid red';",
    checkbox
);

21. Highlight a Radio Button

WebElement radio =

    driver.findElement(By.id("male"));
 
js.executeScript(
    "arguments[0].style.outline='3px solid blue';",
    radio
);

22. Highlight a Dropdown

WebElement dropdown =

    driver.findElement(By.id("country"));
 
js.executeScript(
    "arguments[0].style.outline='3px solid green';",
    dropdown
);

23. Highlight a Link

WebElement link =

    driver.findElement(By.linkText("Contact Us"));
 
js.executeScript(
    "arguments[0].style.outline='3px solid red';",
    link
);

24. Highlight an Image

WebElement image =

    driver.findElement(By.cssSelector(".product-image"));
 
js.executeScript(
    "arguments[0].style.border='4px solid red';",
    image
);

25. Highlight a Table

WebElement table =

    driver.findElement(By.id("employeeTable"));
 
js.executeScript(
    "arguments[0].style.outline='4px solid blue';",
    table
);

26. Highlight a Table Row

WebElement row =

    driver.findElement(
        By.xpath("//table[@id='employees']//tr[5]")
    );
 
js.executeScript(
    "arguments[0].style.backgroundColor='yellow';" +
    "arguments[0].style.outline='3px solid red';",
    row
);

27. Highlight a Specific Table Cell

WebElement cell =

    driver.findElement(
        By.xpath("//table[@id='employees']//tr[5]/td[2]")
    );
 
js.executeScript(
    "arguments[0].style.backgroundColor='yellow';" +
    "arguments[0].style.border='3px solid red';",
    cell
);

28. Highlight Multiple Elements

Multiple elements can be highlighted by using findElements() and iterating through the returned list.

List<WebElement> elements =

    driver.findElements(By.cssSelector(".product"));
 
for (WebElement element : elements) {
    js.executeScript(
        "arguments[0].style.outline='3px solid red';",
        element
    );
}

29. Highlight All Input Fields

List<WebElement> inputs =

    driver.findElements(By.tagName("input"));
 
for (WebElement input : inputs) {
    js.executeScript(
        "arguments[0].style.outline='2px solid blue';",
        input
    );
}

30. Highlight All Buttons

List<WebElement> buttons =

    driver.findElements(By.tagName("button"));
 
for (WebElement button : buttons) {
    js.executeScript(
        "arguments[0].style.outline='3px solid red';",
        button
    );
}

31. Highlight All Links

List<WebElement> links =

    driver.findElements(By.tagName("a"));
 
for (WebElement link : links) {
    js.executeScript(
        "arguments[0].style.outline='2px solid green';",
        link
    );
}

32. Highlight Element Before Clicking

WebElement button =

    driver.findElement(By.id("submit"));
 
js.executeScript(
    "arguments[0].style.outline='4px solid red';",
    button
);
 
button.click();

33. Highlight Element Before Typing

WebElement username =

    driver.findElement(By.id("username"));
 
js.executeScript(
    "arguments[0].style.outline='3px solid blue';",
    username
);
 
username.sendKeys("admin");

34. Highlight Element Before Selecting

WebElement dropdown =

    driver.findElement(By.id("country"));
 
js.executeScript(
    "arguments[0].style.outline='3px solid green';",
    dropdown
);
 
dropdown.click();

35. Highlight Element Before Mouse Hover

WebElement menu =

    driver.findElement(By.id("products"));
 
js.executeScript(
    "arguments[0].style.outline='3px solid red';",
    menu
);
 
new Actions(driver)
    .moveToElement(menu)
    .perform();

36. Highlight Before Double Click

WebElement item =

    driver.findElement(By.id("item"));
 
js.executeScript(
    "arguments[0].style.outline='3px solid blue';",
    item
);
 
new Actions(driver)
    .doubleClick(item)
    .perform();

37. Highlight Before Right Click

WebElement item =

    driver.findElement(By.id("item"));
 
js.executeScript(
    "arguments[0].style.outline='3px solid orange';",
    item
);
 
new Actions(driver)
    .contextClick(item)
    .perform();

38. Create a Reusable Highlight Method

In a real automation framework, repeated JavaScript code should be placed inside a reusable utility method.

public void highlightElement(WebElement element) {

    JavascriptExecutor js =
        (JavascriptExecutor) driver;
 
    js.executeScript(
        "arguments[0].style.outline='3px solid red';",
        element
    );
}

39. Using the Reusable Method

WebElement login =

    driver.findElement(By.id("login"));
 
highlightElement(login);
 
login.click();

40. Reusable Method with Multiple Styles

public void highlightElement(WebElement element) {

    JavascriptExecutor js =
        (JavascriptExecutor) driver;
 
    js.executeScript(
        "arguments[0].style.border='3px solid red';" +
        "arguments[0].style.backgroundColor='yellow';" +
        "arguments[0].style.boxShadow='0 0 10px red';",
        element
    );
}

41. Highlight and Restore Original Style

When highlighting is temporary, the original inline style can be stored and restored later.

String originalStyle =

    element.getAttribute("style");
 
js.executeScript(
    "arguments[0].style.outline='4px solid red';",
    element
);
 
// Perform required operation
 
js.executeScript(
    "arguments[0].setAttribute('style', arguments[1]);",
    element,
    originalStyle
);

42. Why Restore the Original Style?

• To prevent unnecessary modification of the webpage.
• To keep screenshots closer to the original application.
• To prevent debugging styles from affecting later checks.
• To make the framework cleaner.
• To avoid visual side effects in subsequent test steps.

43. Remove Border Highlight

js.executeScript(

    "arguments[0].style.border='';",
    element
);

44. Remove Outline Highlight

js.executeScript(

    "arguments[0].style.outline='';",
    element
);

45. Remove Background Highlight

js.executeScript(

    "arguments[0].style.backgroundColor='';",
    element
);

46. Highlight Using CSS Class

Another approach is to define a CSS class for highlighting and add it dynamically.

js.executeScript(

    "arguments[0].classList.add('selenium-highlight');",
    element
);

47. Example Highlight CSS Class

.selenium-highlight {

    outline: 3px solid red;
    box-shadow: 0 0 10px red;
}

48. Remove Highlight CSS Class

js.executeScript(

    "arguments[0].classList.remove('selenium-highlight');",
    element
);

49. Highlight and Scroll to Element

If the element is outside the current viewport, it can first be brought into view and then highlighted.

WebElement element =

    driver.findElement(By.id("submit"));
 
js.executeScript(
    "arguments[0].scrollIntoView({block:'center'});" +
    "arguments[0].style.outline='4px solid red';",
    element
);

50. Highlight Before Taking Screenshot

WebElement errorMessage =

    driver.findElement(By.id("error"));
 
js.executeScript(
    "arguments[0].style.outline='4px solid red';",
    errorMessage
);
 
// Capture screenshot here

51. Highlight an Error Message

WebElement error =

    driver.findElement(
        By.cssSelector(".error")
    );
 
js.executeScript(
    "arguments[0].style.border='3px solid red';" +
    "arguments[0].style.backgroundColor='pink';",
    error
);

52. Highlight a Success Message

WebElement success =

    driver.findElement(
        By.cssSelector(".success")
    );
 
js.executeScript(
    "arguments[0].style.border='3px solid green';" +
    "arguments[0].style.backgroundColor='lightgreen';",
    success
);

53. Highlight a Warning Message

WebElement warning =

    driver.findElement(
        By.cssSelector(".warning")
    );
 
js.executeScript(
    "arguments[0].style.border='3px solid orange';" +
    "arguments[0].style.backgroundColor='yellow';",
    warning
);

54. Highlight a Product Card

WebElement product =

    driver.findElement(
        By.cssSelector(".product-card")
    );
 
js.executeScript(
    "arguments[0].style.outline='4px solid red';" +
    "arguments[0].style.boxShadow='0 0 15px red';",
    product
);

55. Highlight a Navigation Menu

WebElement menu =

    driver.findElement(
        By.cssSelector(".navigation")
    );
 
js.executeScript(
    "arguments[0].style.outline='3px solid blue';",
    menu
);

56. Highlight a Modal

WebElement modal =

    driver.findElement(
        By.cssSelector(".modal")
    );
 
js.executeScript(
    "arguments[0].style.outline='4px solid red';",
    modal
);

57. Highlight a Form Section

WebElement form =

    driver.findElement(
        By.id("registrationForm")
    );
 
js.executeScript(
    "arguments[0].style.outline='4px solid green';",
    form
);

58. Highlighting with Page Object Model

Highlighting can be included in a reusable BasePage or utility class in a Page Object Model framework.

public class BasePage {

 
    protected WebDriver driver;
 
    public BasePage(WebDriver driver) {
        this.driver = driver;
    }
 
    public void highlightElement(WebElement element) {
        JavascriptExecutor js =
            (JavascriptExecutor) driver;
 
        js.executeScript(
            "arguments[0].style.outline='3px solid red';",
            element
        );
    }
}

59. Login Page Example

public class LoginPage extends BasePage {

 
    private By username =
        By.id("username");
 
    private By password =
        By.id("password");
 
    private By loginButton =
        By.id("login");
 
    public LoginPage(WebDriver driver) {
        super(driver);
    }
 
    public void highlightLoginFields() {
 
        highlightElement(
            driver.findElement(username)
        );
 
        highlightElement(
            driver.findElement(password)
        );
 
        highlightElement(
            driver.findElement(loginButton)
        );
    }
}

60. Highlight Utility Class

public class HighlightUtils {

 
    public static void highlight(
        WebDriver driver,
        WebElement element
    ) {
 
        JavascriptExecutor js =
            (JavascriptExecutor) driver;
 
        js.executeScript(
            "arguments[0].style.outline='3px solid red';",
            element
        );
    }
 
    public static void removeHighlight(
        WebDriver driver,
        WebElement element
    ) {
 
        JavascriptExecutor js =
            (JavascriptExecutor) driver;
 
        js.executeScript(
            "arguments[0].style.outline='';",
            element
        );
    }
}

61. Using HighlightUtils

WebElement button =

    driver.findElement(By.id("submit"));
 
HighlightUtils.highlight(
    driver,
    button
);
 
button.click();

62. Highlight with Explicit Wait

Highlighting should not be used as a synchronization mechanism. If an element is dynamically loaded, wait for the required condition first.

WebDriverWait wait =

    new WebDriverWait(
        driver,
        Duration.ofSeconds(10)
    );
 
WebElement element = wait.until(
    ExpectedConditions.visibilityOfElementLocated(
        By.id("submit")
    )
);
 
HighlightUtils.highlight(
    driver,
    element
);

63. Highlight Before Click with Explicit Wait

WebDriverWait wait =

    new WebDriverWait(
        driver,
        Duration.ofSeconds(10)
    );
 
WebElement button = wait.until(
    ExpectedConditions.elementToBeClickable(
        By.id("submit")
    )
);
 
HighlightUtils.highlight(
    driver,
    button
);
 
button.click();

64. Highlight Dynamic Element

WebElement element = new WebDriverWait(

    driver,
    Duration.ofSeconds(10)
).until(
    ExpectedConditions.visibilityOfElementLocated(
        By.id("dynamicElement")
    )
);
 
HighlightUtils.highlight(
    driver,
    element
);

65. Highlight Element Inside iframe

When an element is inside an iframe, switch to the correct frame before locating and highlighting the element.

WebElement frame =

    driver.findElement(By.id("paymentFrame"));
 
driver.switchTo().frame(frame);
 
WebElement paymentButton =
    driver.findElement(By.id("pay"));
 
HighlightUtils.highlight(
    driver,
    paymentButton
);
 
driver.switchTo().defaultContent();

66. Highlight Element Inside a Modal

WebElement modal =

    driver.findElement(
        By.cssSelector(".modal")
    );
 
WebElement target =
    modal.findElement(
        By.cssSelector(".target")
    );
 
HighlightUtils.highlight(
    driver,
    target
);

67. Highlight Element in a Table

WebElement employee =

    driver.findElement(
        By.xpath("//table//tr[5]")
    );
 
HighlightUtils.highlight(
    driver,
    employee
);

68. Highlight Element During Login Automation

WebElement username =

    driver.findElement(By.id("username"));
 
WebElement password =
    driver.findElement(By.id("password"));
 
WebElement login =
    driver.findElement(By.id("login"));
 
HighlightUtils.highlight(
    driver,
    username
);
 
username.sendKeys("admin");
 
HighlightUtils.highlight(
    driver,
    password
);
 
password.sendKeys("admin123");
 
HighlightUtils.highlight(
    driver,
    login
);
 
login.click();

69. Highlight Elements During Registration

WebElement firstName =

    driver.findElement(By.id("firstName"));
 
WebElement email =
    driver.findElement(By.id("email"));
 
WebElement register =
    driver.findElement(By.id("register"));
 
HighlightUtils.highlight(
    driver,
    firstName
);
 
firstName.sendKeys("John");
 
HighlightUtils.highlight(
    driver,
    email
);
 
email.sendKeys("[email protected]");
 
HighlightUtils.highlight(
    driver,
    register
);
 
register.click();

70. Highlight Elements During E-Commerce Testing

WebElement search =

    driver.findElement(By.id("search"));
 
WebElement product =
    driver.findElement(
        By.cssSelector(".product-card")
    );
 
WebElement cart =
    driver.findElement(By.id("cart"));
 
HighlightUtils.highlight(
    driver,
    search
);
 
search.sendKeys("Laptop");
 
HighlightUtils.highlight(
    driver,
    product
);
 
HighlightUtils.highlight(
    driver,
    cart
);

71. Highlight Elements During Checkout

WebElement address =

    driver.findElement(By.id("address"));
 
WebElement payment =
    driver.findElement(By.id("payment"));
 
WebElement order =
    driver.findElement(By.id("placeOrder"));
 
HighlightUtils.highlight(
    driver,
    address
);
 
HighlightUtils.highlight(
    driver,
    payment
);
 
HighlightUtils.highlight(
    driver,
    order
);

72. Highlighting for Locator Debugging

Highlighting is useful when a page contains multiple similar elements. It can help determine which element a locator actually selected.

WebElement element =

    driver.findElement(
        By.xpath("//button[contains(text(),'Submit')]")
    );
 
HighlightUtils.highlight(
    driver,
    element
);

73. Highlighting Does Not Validate a Locator

A locator can successfully return an element while still selecting the wrong element. Therefore, after locating an element, verify its text, attributes, position, or other relevant properties when necessary.

74. Highlighting Does Not Make an Element Clickable

Adding a border or outline does not make a hidden, disabled, covered, or otherwise non-interactable element clickable.

75. Highlighting Does Not Replace Explicit Waits

Highlighting only changes the appearance of an element. It does not wait for the element to become visible, enabled, clickable, or ready for interaction.

76. Highlighting and Element State

Before interacting with an element, the test may need to check:

• Whether the element is displayed.
• Whether the element is enabled.
• Whether the element is selected when applicable.
• Whether the correct frame is selected.
• Whether the correct browser window or tab is active.
• Whether an overlay is blocking the element.

77. Highlight a Displayed Element

if (element.isDisplayed()) {

    HighlightUtils.highlight(
        driver,
        element
    );
}

78. Highlight an Enabled Element

if (element.isEnabled()) {

    HighlightUtils.highlight(
        driver,
        element
    );
}

79. Highlight a Selected Checkbox

if (checkbox.isSelected()) {

    HighlightUtils.highlight(
        driver,
        checkbox
    );
}

80. Common Mistakes While Highlighting Elements

• Using highlighting as a replacement for explicit waits.
• Using highlighting as a solution for click failures.
• Using an incorrect locator.
• Ignoring iframe or window context.
• Leaving debugging styles on the page unnecessarily.
• Highlighting every element without a debugging purpose.
• Changing CSS properties that affect page layout.
• Assuming a highlighted element is automatically valid.

81. Common Mistake: Using Highlighting as a Click Fix

If a click fails, highlighting does not solve the underlying problem. Investigate the locator, synchronization, overlays, visibility, enabled state, stale elements, frame context, and other interaction conditions.

82. Common Mistake: Changing Layout with Border

Depending on the element's CSS box model, adding a border can affect dimensions or layout. An outline is often a safer visual debugging option.

83. Common Mistake: Not Restoring Styles

If the test performs visual comparisons, screenshot validation, or CSS-related checks, temporary highlighting can interfere with those validations. Restore the original style when required.

84. Best Practice: Use a Utility

public void highlightElement(WebElement element) {

    JavascriptExecutor js =
        (JavascriptExecutor) driver;
 
    js.executeScript(
        "arguments[0].style.outline='3px solid red';",
        element
    );
}

85. Best Practice: Use Highlighting Selectively

Highlight only the elements that need to be investigated or demonstrated. This keeps the automation execution easier to understand and avoids unnecessary JavaScript operations.

86. Best Practice: Combine Highlighting with Logging

System.out.println(

    "Highlighting Login button"
);
 
HighlightUtils.highlight(
    driver,
    loginButton
);

87. Best Practice: Highlight Before Important Actions

HighlightUtils.highlight(

    driver,
    submitButton
);
 
submitButton.click();

88. Best Practice: Validate After the Action

HighlightUtils.highlight(

    driver,
    submitButton
);
 
submitButton.click();
 
WebElement success =
    wait.until(
        ExpectedConditions.visibilityOfElementLocated(
            By.id("success")
        )
    );

89. Highlighting in Debug Mode

A framework can enable highlighting only when debugging is required.

boolean debugMode = true;

 
if (debugMode) {
    HighlightUtils.highlight(
        driver,
        element
    );
}
 
element.click();

90. Configuration-Based Highlighting

if (Config.isHighlightEnabled()) {

    HighlightUtils.highlight(
        driver,
        element
    );
}

91. Highlighting and Screenshots

Highlighting can make screenshots easier to understand by showing the exact element involved in a test step.

HighlightUtils.highlight(

    driver,
    targetElement
);
 
// Capture screenshot here

92. Highlighting Failed Elements

if (!actualText.equals(expectedText)) {

    HighlightUtils.highlight(
        driver,
        resultElement
    );
 
    System.out.println(
        "Validation failed"
    );
}

93. Highlighting Multiple Invalid Fields

List<WebElement> invalidFields =

    driver.findElements(
        By.cssSelector(".invalid")
    );
 
for (WebElement field : invalidFields) {
    HighlightUtils.highlight(
        driver,
        field
    );
}

94. Complete Highlight Utility

public class HighlightUtils {

 
    public static void highlight(
        WebDriver driver,
        WebElement element
    ) {
 
        JavascriptExecutor js =
            (JavascriptExecutor) driver;
 
        js.executeScript(
            "arguments[0].style.outline='3px solid red';" +
            "arguments[0].style.boxShadow='0 0 10px red';",
            element
        );
    }
 
    public static void removeHighlight(
        WebDriver driver,
        WebElement element
    ) {
 
        JavascriptExecutor js =
            (JavascriptExecutor) driver;
 
        js.executeScript(
            "arguments[0].style.outline='';" +
            "arguments[0].style.boxShadow='';",
            element
        );
    }
}

95. Complete Login Example

import java.time.Duration;

 
import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
 
public class HighlightExample {
 
    public static void main(String[] args) {
 
        WebDriver driver =
            new ChromeDriver();
 
        try {
 
            driver.manage()
                  .window()
                  .maximize();
 
            driver.get("https://example.com");
 
            WebDriverWait wait =
                new WebDriverWait(
                    driver,
                    Duration.ofSeconds(10)
                );
 
            WebElement username = wait.until(
                ExpectedConditions.visibilityOfElementLocated(
                    By.id("username")
                )
            );
 
            JavascriptExecutor js =
                (JavascriptExecutor) driver;
 
            js.executeScript(
                "arguments[0].style.outline='3px solid red';",
                username
            );
 
            username.sendKeys("admin");
 
            WebElement password =
                driver.findElement(
                    By.id("password")
                );
 
            js.executeScript(
                "arguments[0].style.outline='3px solid blue';",
                password
            );
 
            password.sendKeys("admin123");
 
            WebElement login =
                driver.findElement(
                    By.id("login")
                );
 
            js.executeScript(
                "arguments[0].style.outline='3px solid green';",
                login
            );
 
            login.click();
 
        } finally {
            driver.quit();
        }
    }
}

96. Highlighting with TestNG

import org.testng.annotations.Test;

 
public class HighlightTest {
 
    @Test
    public void highlightTest() {
 
        WebElement button =
            driver.findElement(By.id("submit"));
 
        HighlightUtils.highlight(
            driver,
            button
        );
 
        button.click();
    }
}

97. Highlighting in an Automation Framework

Test Case

   ↓
Page Object
   ↓
Locate Element
   ↓
Wait for Element
   ↓
Highlight Element
   ↓
Perform Action
   ↓
Validate Result
   ↓
Remove Highlight if Required
   ↓
Report Result

98. Interview Question: What is Highlighting an Element?

Highlighting an element means temporarily changing its CSS appearance through JavaScript so that it becomes visually noticeable during Selenium execution.

99. Interview Question: How Do You Highlight an Element?

JavascriptExecutor js =

    (JavascriptExecutor) driver;
 
js.executeScript(
    "arguments[0].style.border='3px solid red';",
    element
);

100. Interview Question: Why is JavascriptExecutor Used?

JavaScript can directly modify DOM and CSS properties. Selenium does not provide a dedicated native highlight() method, so JavaScriptExecutor is commonly used for this purpose.

101. Interview Question: What is arguments[0]?

arguments[0] represents the first parameter passed to the JavaScript executed by Selenium.

102. Interview Question: Does Highlighting Make an Element Clickable?

No. Highlighting changes the visual appearance only. It does not make a hidden, disabled, covered, or non-interactable element clickable.

103. Interview Question: Does Highlighting Replace Explicit Wait?

No. Explicit waits and highlighting serve different purposes. Explicit waits synchronize the test with application state, while highlighting provides visual feedback.

104. Interview Question: Can Multiple Elements Be Highlighted?

Yes. Use findElements() and iterate over the returned list.

105. Interview Question: How Can You Remove Highlighting?

js.executeScript(

    "arguments[0].style.outline='';",
    element
);

106. Interview Question: Border vs Outline?

Both can visually highlight an element. An outline is often convenient for debugging because it generally does not occupy layout space.

107. Interview Question: Can Highlighting Affect a Test?

Yes. Because highlighting modifies CSS or DOM state, it can affect the visual appearance and, depending on the property used, potentially affect layout. Therefore it should normally be treated as a debugging modification.

108. Interview Question: Should Every Element Be Highlighted?

No. Highlighting should generally be used selectively for debugging, demonstration, or troubleshooting.

109. Quick Revision Table

110. Highlight Elements Checklist

• Locate the correct WebElement.
• Use a reliable locator.
• Create JavascriptExecutor when required.
• Apply a temporary visual style.
• Prefer outline when layout modification should be avoided.
• Use explicit waits separately for synchronization.
• Use native Selenium interactions for normal user actions.
• Restore the original style when required.
• Use reusable utility methods.
• Enable highlighting selectively in larger frameworks.
• Validate actual application behavior after interaction.

111. Best Practice Summary

112. Final Practical Workflow

Launch Browser

      ↓
Open Application
      ↓
Locate WebElement
      ↓
Wait for Required Condition
      ↓
Highlight Element
      ↓
Perform Selenium Action
      ↓
Validate Result
      ↓
Remove Highlight if Required
      ↓
Capture Screenshot/Report
      ↓
Continue Test

113. Conclusion

Highlight Elements is a useful Selenium WebDriver technique for visually identifying WebElements during automated test execution. It is commonly implemented with JavascriptExecutor by modifying CSS properties such as border, outline, background color, or box shadow.

The technique is useful for debugging locators, demonstrating automation workflows, troubleshooting failed interactions, identifying target elements, and creating clearer screenshots. However, highlighting does not replace explicit waits, element validation, reliable locators, or normal Selenium interactions.

For maintainable automation frameworks, highlighting can be implemented as a reusable utility and enabled only when debugging or visual demonstration is required.

Selenium Training Course | Register for Course Demo